<template>
    <div>
        <el-table
                row-key="id"
                height="80vh"
                :data="noticesData"
                border style="width: 100%"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">

            <el-table-column prop="title" label="标题" width="700"/>
            <el-table-column prop="createTime" label="创建时间" width="220"/>
            <el-table-column align="center" label="操作" prop="operate" width="300">
                <template v-slot="scope">
                    <el-button
                        icon="Edit"
                        size="small" type="primary"
                        @click="this.linkTo(scope.row)"
                    >查看详情
                    </el-button>
                    <el-button
                        icon="Delete"
                        size="small" type="danger"
                        @click="this.deleteItem(scope.row)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="footer">
        <el-pagination
                small
                :pager-count="5"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[50, 100 , 200 , 500,1000,2000,5000]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
import request from "@/util/request.js";
export default {
    data() {
        return {
            noticesData: [],
            pageNum: 1, //页码
          pageSize: 50,  //页长
            total: 0,  //总表长
        };
    },
    //初始化加载
    created() {
        this.getData()
    },
    mounted() {

    },
    methods: {
        linkTo(scope) {
            this.$router.push("/notifications?id=" + scope.id)
        },
        deleteItem(scope) {
            // 获取要删除的通知的 ID
            const id = scope.id;
            this.$confirm('此操作将永久删除该通知, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 确认删除，向服务器发送请求
                request.get(`/related_notice/delete/${id}`)
                    .then(() => {
                        // 删除成功，重新获取数据
                        this.getData();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        renderHeader(h, {column}) {
            // 隐藏表头内容
            column.realLabel = column.label;
            column.label = '';
            // 返回一个自定义的表头单元格
            return h('el-table-column', {props: {width: '50'}}, column.realLabel);
        },
        // 获取所有结束活动
        getData() {
            request.get("/related_notice/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(res => {
                if (res.data.code === '200') {
                    for (let key in res.data.data) {
                        if (key === "records") {
                            this.noticesData = res.data.data[key];
                        } else if (key === "total") {
                            this.total = res.data.data[key];
                        }
                    }
                } else {
                }
            })
        },
        //表尾分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.getData();
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getData();
        },
    }
};

</script>


<style scoped>
</style>
